import { Text,TextInput,Image, View,StyleSheet,Button } from "react-native";
import {Link} from "expo-router";
import React, { useState } from 'react';
import { Picker } from '@react-native-picker/picker';

import * as ImagePicker from 'expo-image-picker';


export default function Index() {
  const [name, setName] = useState('');
  const [ageRange, setAgeRange] = useState('18-25');
  const [image, setImage] = useState<string | null>(null);
  const [photos, setPhotos] = useState<string[]>([]); 

  const takePhoto = async () => {
    // No permissions request is necessary for launching the image library
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    console.log(result);

    if (!result.canceled) {
      setPhotos([...photos, result.assets[0].uri]);
    }
  };

  const handlerSumbit = () => {
    const formData = {
      name,
      ageRange,
      photos
    };
    console.log('提交的数据:', formData);
  };

  return (
    <View
    >
      <Text>Record</Text>
      {/* 名称输入 */}
      <View style={commonInputContainerStyle.container}>
      <Text style={commonInputContainerStyle.label}>名称</Text>
      <TextInput
        style={commonInputContainerStyle.input}
        placeholder="请输入名称"
        value={name}
        onChangeText={setName}
      />
      </View>

      {/* 年龄段选择 */}
      <View style={commonInputContainerStyle.container}>
      <Text style={commonInputContainerStyle.label}>年龄段</Text>
      <Picker
        selectedValue={ageRange}
        onValueChange={(itemValue) => setAgeRange(itemValue)}
      >
        <Picker.Item label="18-25" value="18-25" />
        <Picker.Item label="26-35" value="26-35" />
        <Picker.Item label="36-45" value="36-45" />
        <Picker.Item label="46+" value="46+" />
      </Picker>
      </View>

      {/* 拍照按钮 */}
      <View style={commonInputContainerStyle.container}>
      <View style={styles.photoSection}>
        <Button title="拍照" onPress={takePhoto} />
      </View>
      </View>
      <View style={commonInputContainerStyle.container}>
      {/* 显示照片 */}
      <View style={styles.photosContainer}>
        {photos.map((photo, index) => (
          <Image key={index} source={{ uri: photo }} style={styles.photo} />
        ))}
      </View>
      </View>

      <View >
        <Button title="提交" onPress={handlerSumbit} />
      </View>
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
    width: '100%',
    backgroundColor: '#fff',
  },
  formContainer: {
    padding: 16,
  },
  inputRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
  },
  label: {
    fontSize: 16,
    width: 80,
    marginRight: 10,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    padding: 10,
    fontSize: 16,
  },
  photoSection: {
    marginBottom: 16,
  },
  photosContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginBottom: 16,
  },
  photo: {
    width: 100,
    height: 100,
    margin: 5,
    borderRadius: 5,
  },
  submitButton: {
    marginTop: 20,
  },
});

const commonInputContainerStyle = StyleSheet.create({
  container: {
    flexDirection: 'row', // 横向排列
    marginVertical: 10, // 上下外边距
  },
  label: {
    fontSize: 16,
    marginRight: 10, // 名称和输入框之间的间距
    width: 60, // 固定名称宽度，确保对齐
  },
  input: {
    flex: 1, // 输入框占据剩余空间
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    padding: 10,
    fontSize: 16,
  },
});

